<template>
  <div class="main-footer__container">
    <button @click="handel">{{button}}</button>
    <div class="main-footer">
      <div class="input-box" v-if="button !== '重置账号'">
        <input id="automatic" type="checkbox" v-model="isSelect">
        <label for="automatic"></label>
        <p v-if="button === '登录'">下次自动登录</p>
        <p v-if="button !== '登录'">我已阅读并同意<span>用户协议</span>和<span>隐私政策</span></p>
      </div>
      <div class="switch-box">
        <span @click="handleReset">忘记密码</span>
        <span> · </span>
        <span v-if="button === '注册'" @click="handleLogin">登录</span>
        <span v-if="button !== '注册'" @click="handleRegister">注册</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    button: String
  },
  data() {
    return {
      isSelect: ''
    }
  },
  methods: {
    // 按钮点击
    handel() {
      this.$emit('handle', this.isSelect);
    },
    // 跳转忘记密码
    handleReset() {
      this.$router.push('/users/reset');
    },
    // 跳转登录
    handleLogin() {
      this.$router.push('/users/login');
    },
    // 跳转注册
    handleRegister() {
      this.$router.push('/users/register');
    }
  }
}
</script>

<style lang="scss" scoped>
  .main-footer__container{
    > button {
      width: 100%;
      background-color: rgba(0, 170, 230, .8);
      border: none;
      cursor: pointer;
      @include border-radius(4*$length);
      @extend %animate-transition;
      @include fontStyle(16,56,500,#fff,center);
      &:hover {
        background-color: rgba(0, 170, 230, 1);
      }
    }
    .main-footer {
      width: 100%;
      margin: 16*$length auto;
      @extend %clearFix;
      @extend %cursorPointer;
      @include fontStyle(12, 17, 500, #999, left);
      .input-box {
        float: left;
        text-align: left;
        @extend %flex-row-spb;
        /*label标签的大小、位置、背景颜色更改，在css选择时，“+”代表相邻元素，即当前元素的下一元素*/
        #automatic + label {
          display: inline-block;
          width: 12*$length;
          height: 12*$length;
          cursor: pointer;
          background-color: #fff;
          @include border-radius(2*$length);
          border: 1*$length solid #999;
          box-sizing: border-box;
        }
        #automatic:checked + label::before {
          display: block;
          width: 12*$length;
          height: 12*$length;
          line-height: 12*$length;
          content: "\2713";
          text-align: center;
          font-size: 12*$length;
          background-color: #75D098;
          color: #fff;
          @include border-radius(2*$length);
        }
        #automatic:checked + label {
          border: none;
        }
        input[type=checkbox] {
          display: none;
        }
        > p {
          display: inline-block;
          padding-left: 8*$length;
          > span {
            color: #666;
          }
        }
      }
      .switch-box{
        float: right;
      }
    }
  }
</style>
